<template>
	<view class="setting-container">
		<view class='form' @tap="chooseImage()">
			<view class='form-item'>
				<view class='form-item-title'>头像</view>
				<view class="neirong">
					<image :src="userInfo.avatarUrl"></image>
				</view>
			</view>
		</view>


		<view class='form' @tap="yitan()">
			<view class='form-item'>
				<view class='form-item-title'>昵称</view>
				<view class="neirong">{{userInfo.nickName}}</view>
			</view>
		</view>

		<!-- 弹窗1 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal' bindtap="yingcangtan"></view>
		<view class="modalDlg1" catchtouchmove='preventTouchMove' v-if='showModal'>
			<view class='windowRow1'>
				<view class="neirong2">
					<view class="tip">昵称修改</view>
					<input type="text" placeholder="请输入" placeholder-class="schoolsrarch" v-model="inputnickname"
						class="tan1yi"></input>
				</view>
				<view class="tan1anniu">
					<view class='back1' hover-class="back12" @tap='back()'>返回</view>
					<view class='wishbnt1' hover-class="wishbnt12" @tap='queding()'>确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入vuex
	import { mapState, mapMutations } from 'vuex'
	import {baseUrl,http} from '../../utils/http.js'
	export default {
		data() {
			return {
				showModal: false,
				inputnickname:'',
				interstitialAd:null// 弹出广告
			};
		},
		computed:{
			...mapState('m_user',['userInfo','token'])
		},
		onLoad(){
			if(wx.createInterstitialAd){
			      this.interstitialAd = wx.createInterstitialAd({ adUnitId: 'adunit-4a6748356cdd7858' })
			      this.interstitialAd.onLoad(() => {
			        // console.log('onLoad event emit')
					this.interstitialAd.show().catch((err) => {
					  // console.error(err)
					})
			      })
			      this.interstitialAd.onError((err) => {
			        // console.log('onError event emit', err)
			      })
			      this.interstitialAd.onClose((res) => {
			        // console.log('onClose event emit', res)
			      })
			    }
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			yitan(){
				this.showModal=true
			},
			back(){
				this.showModal=false
			},
			/* 修改昵称 */
			queding() {
				let _this=this
				/* 调接口 */
				http({
					url:'/wx/auth/updateUsername?nickname='+_this.inputnickname,
					method:"POST",
					header:{
						Authorization:_this.token.data,
						'Content-Type':'x-www-form-urlencoded'
					}
				}).then(res=>{
					// console.log(res)
					if(res.code&&(res.code==200)){
						uni.showToast({
							title: '修改成功',
							icon: "success",
							duration: 2000,
							position: 'bottom'
						});
						_this.showModal=false
						this.updateUserInfo(res.data)
					}else{
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000,
							position: 'bottom'
						});
					}
				})
			},
			/* 修改头像 */
			chooseImage() {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success:res=>{
						uni.uploadFile({
							url:baseUrl+'/wx/auth/updateAvatar',
							filePath:res.tempFilePaths[0],
							name:'avatar',
							header:{
								Authorization:this.token.data
							},
							success:r=>{
								if(r.data){
									let userInfoData=JSON.parse(r.data)
									if(r.data&&userInfoData.code&&(userInfoData.code==200)){
										uni.showToast({
											title: '修改成功',
											icon: "success",
											duration: 2000,
											position: 'bottom'
										});
										this.updateUserInfo(userInfoData.data)
									}else{
										uni.showToast({
											title: r.message,
											icon: "none",
											duration: 2000,
											position: 'bottom'
										});
									}
								}
							},
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
/* pages/shezhi/shezhi.wxss */
.setting-container{
	height: 100vh;
	background-color: #FFFFFF;
}
page {
    width: 100%;
    height: 100%;
    background-color: white;
 } 
 .form {
   width: 100%;
   display: flex;
  /*  flex-direction: column; */
   /* justify-content: center; */
  /*  align-items: center; */
  /*  margin: auto auto; */
   background-color: #fff;
   border-bottom: 1px solid #EEECED;
 }
 .form2 {
   width: 100%;
   display: flex;
  /*  flex-direction: column; */
   /* justify-content: center; */
  /*  align-items: center; */
  /*  margin: auto auto; */
   background-color: rgb(221, 220, 220);
   border-bottom: 1px solid #b8b7b7;
 }
 .form-item {
   position: relative;
   width: 100%;
   height: 100rpx;
   display: flex;
   flex-direction: row;
  /*  justify-content: flex-start; */
   align-items: center;
 }
 .form-item-title {
    width: 50%;
    height: 8vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30rpx;
    line-height: 8vh;
    margin-left: 30rpx;
  }
  .neirong {
    position:absolute;
    height: 100rpx;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30rpx;
    line-height: 100rpx;
    right: 40rpx;
    /* background-color: aqua; */
  }
  .neirong image{
    width: 80rpx;
    height: 80rpx;
    margin-top: 10rpx;
    right: 0rpx;
    border-radius: 50%;
  }
  
  .guide {
    right: 10rpx;
    position: absolute;
  }
  .guide:after {
    position: relative;  
    content: " ";
    display: inline-block;
    height: 20rpx;
    width: 20rpx;
    border-width: 2rpx 2rpx 0 0;
    border-color: #888888;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: 50%;
    margin-top: -8rpx;
    right: 10rpx;
  }
/* 按钮 */
.text {
  position: absolute;
  width: 100%;
  height: 100rpx;
  bottom: 150rpx;
}
.chongtext {
  width: 260rpx;
  height: 80rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  text-align: center;
  color: white;
  margin: 0 auto;
  border-radius: 2em;
  border:1px solid #f7f5f5;
  background-color: #3ea2ff;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
  7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}
.chongtext2 {
  width: 260rpx;
  height: 80rpx;
  font-size: 34rpx;
  line-height: 80rpx;
  text-align: center;
  color: white;
  margin: 0 auto;
  border-radius: 2em;
  border:1px solid #f7f5f5;
  background-color: #3ea2ff;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
  7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}

/* 弹窗1 */
.model {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 80;
    opacity: 0.5;
    top: 0;
    left: 0;
  }
  
  .modalDlg1 {
    position: fixed;
    width: 80%;
    height: 300rpx;
    top: 400rpx;
    left: 0;
    right: 0;
    z-index: 99;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20rpx;
  }
  
  .windowRow1 {
    position: relative;
    width: 100%;
    height: 300rpx;
    /* background-color: #a4c3e6; */
    justify-content: space-between;
    align-items: center;
  }
  
  .neirong2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150rpx;
    padding-top: 20rpx;
    /* background-color: #d8d839; */
  }
  
  .schoolsrarch {
    color: #3ea2ff;
  }
  .schoolsrarch2 {
    color: #fff;
  }
  .tip {
    width: 100%;
    height: 50rpx;
    line-height: 50rpx;
    color: #3ea2ff;
    text-align: center;
    /* background-color: #b8b7b7; */
  }
  .tan1yi {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    color: #3ea2ff;
    border-radius: 20rpx;
    margin-left: 60rpx;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    border: 1rpx solid #3ea2ff;
  }
  .tan1yi2 {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    color: #3ea2ff;
    border-radius: 20rpx;
    margin-left: 60rpx;
    text-align: center;
    margin: 0 auto;
    border:1rpx solid #3ea2ff;
    background-color: #fff;
  }
    .tan1anniu {
      position: absolute;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      bottom: 0;
      border-top: 2rpx solid #f0f0ee;
      
  }
  
  .back1 {
      width: 50%;
      text-align: center;
      color: #9c9c9a;
      border-right: 2rpx solid #f0f0ee;
      border-radius: 0 0 0 20rpx;
  
      background-color: #fff;
  }
  
  .back12 {
      width: 50%;
      text-align: center;
      color: #9c9c9a;
      border-right: 2rpx solid #f0f0ee;
      border-radius: 0 0 0 20rpx;
   
      background-color: #f0f0ee;
  }
  
  .wishbnt1 {
      width: 50%;
      color: #3ea2ff;
      text-align: center;
      border-left: 2rpx solid #f0f0ee;
      border-radius: 0 0 20rpx 0;
  
      background-color: #fff;
  }
  
  .wishbnt12 {
      width: 50%;
      color: #3ea2ff;
      text-align: center;
      border-left: 2rpx solid #f0f0ee;
      border-radius: 0 0 20rpx 0;
  
      background-color: #f0f0ee;
  }
</style>
